<template>
  <div class="my-4 flex">
    <div class="z-divider-left" :class="[flexGrow.left]"></div>
    <span v-if="title" class="mx-2">{{ title }}</span>
    <div class="z-divider-right" :class="[flexGrow.right]"></div>
  </div>
</template>
<script lang="ts">
/**
 * 分割线组件
 */
import { computed, defineComponent, PropType } from "vue";
import { Placement } from "./types";

export default defineComponent({
  props: {
    dashed: Boolean,
    placement: {
      type: String as PropType<Placement>,
      default: "left",
    },
    title: String,
    titleColor: {
      type: String,
      default: "inherit",
    },
    color: {
      type: String,
      default: "#e5e7eb",
    },
    width: {
      type: Number,
      default: 1,
    },
  },
  setup(props) {
    const flexGrow = computed(() => ({
        left: ["center", "right"].includes(props.placement) ? "flex-grow" : "",
        right: ["center", "left"].includes(props.placement) ? "flex-grow" : "",
      })),
      borderStyle = computed(() => (props.dashed ? "dashed" : "solid")),
      borderWidth = computed(() => props.width + "px");
    return {
      flexGrow,
      borderStyle,
      borderWidth,
    };
  },
});
</script>
<style>
.z-divider-left,
.z-divider-right {
  position: relative;
  width: 2rem;
  border-color: v-bind(color);
}
.z-divider-left::before,
.z-divider-right::before {
  position: absolute;
  content: "";
  border-top-width: v-bind(borderWidth);
  border-top-style: v-bind(borderStyle);
  border-top-color: inherit;
  top: 50%;
  left: 0;
  right: 0;
}
</style>
